Vue.component('car-change', {
    template: `<div class="car-change-main">
        <div class="car-body">
            <div class="car-tab">
                <!-- 车头-->
                <div @click="onCarBearing(0,head)" class="car-direction car-item">
                    <div class="carhead1 carBody">
                        <!-- 引擎-->
                        <div class="headEngine" :style="{backgroundPositionX:car.engine}"></div>
                        <!-- 前保险杠-->
                        <div class="head_bumper_no1" :style="{backgroundPositionX:car.prevBumper}"></div>
                        <!-- 前裙边-->
                        <div class="head_bumper_skrit" :style="{backgroundPositionX:car.prevSkirt}"></div>
                        <!-- 前-翼子板-左-->
                        <div class="head_plate_left" :style="{backgroundPositionX:car.prevLeftPlate}"></div>
                        <!-- 前 - 翼子板 -右-->
                        <div class="head_plate_right" :style="{backgroundPositionX:car.prevRightPlate}"></div>
                        <!-- 前 - 车镜-左-->
                        <div class="head_mirror_left" :style="{backgroundPositionX:car.mirrorLeft}"></div>
                        <div class="head_mirror_right" :style="{backgroundPositionX:car.mirrorRight}"></div>
                        <!-- 前 - 立柱-->
                        <div class="head_column_left" :style="{backgroundPositionX:car.columnPrevLeft}"></div>
                        <div class="head_column_right" :style="{backgroundPositionX:car.columnPrevRight}"></div>
                        <!-- 前 - 车顶 -->
                        <div class="head_roof" :style="{backgroundPositionX:car.roof}"></div>

                    </div>
                </div>

                <!-- 车尾-->
                <div @click="onCarBearing(1,foot)" class="car-direction car-item">
                    <div class="carfoot1 carBody">
                        <!-- 车顶 -->
                        <div class="foot_roof" :style="{backgroundPositionX:car.roof}"></div>
                        <!-- 后 - 翼子板-左-->
                        <div class="foot_plate_left" :style="{backgroundPositionX:car.nextLeftPlate}"></div>
                        <!-- 后 - 翼子板 -右-->
                        <div class="foot_plate_right" :style="{backgroundPositionX:car.nextRightPlate}"></div>
                        <!--后 - 保险杠-->
                        <div class="foot_bumper_no" :style="{backgroundPositionX:car.bumperNext}"></div>
                        <!-- 后 - 保险杠 - 底部-->
                        <div class="foot_bumper_skrit" :style="{backgroundPositionX:car.nextSkirt}"></div>
                        <!-- 左 - 后备箱-->
                        <div class="foot_trunk" :style="{backgroundPositionX:car.trunk}"></div>
                    </div>
                </div>

                <!-- 左边-->
                <div @click="onCarBearing(2,carLeft)" class="car-direction car-item2">
                    <div class="carleft1 carBody">
                        <div class="left_hood" :style="{backgroundPositionX:car.engine}"></div>
                        <!-- 前保险杠-->
                        <div class="left_bumper_head" :style="{backgroundPositionX:car.prevBumper}"></div>
                        <!-- 前裙边-->
                        <div class="left_bumper_skrit_front" :style="{backgroundPositionX:car.prevSkirt}"></div>
                        <!-- 前-翼子板-左-->
                        <div class="left_plate_before" :style="{backgroundPositionX:car.prevLeftPlate}"></div>
                        <!-- 前 - 车镜-左-->
                        <div class="left_mirror" :style="{backgroundPositionX:car.mirrorLeft}"></div>
                        <!-- 前 - 立柱-->
                        <div class="left_door_postA" :style="{backgroundPositionX:car.columnPrevLeft}"></div>
                        <!-- 车顶 -->
                        <div class="left_roof" :style="{backgroundPositionX:car.roof}"></div>
                        <!-- 左- - 翼子板 - 后-->
                        <div class="left_plate_after" :style="{backgroundPositionX:car.nextLeftPlate}"></div>
                        <!--后 - 保险杠-->
                        <div class="left_after_bumper" :style="{backgroundPositionX:car.bumperNext}"></div>
                        <!-- 后 - 保险杠 - 底部-->
                        <div class="left_bumper_skrit_after" :style="{backgroundPositionX:car.nextSkirt}"></div>

                        <!-- 左 - 前侧裙边 - -->
                        <div class="left_bumper_skrit_front" :style="{backgroundPositionX:car.prevSkirt}"></div>
                        <!-- 左 - 门柱中间-->
                        <div class="left_door_postB" :style="{backgroundPositionX:car.columnCenterLeft}"></div>
                        <!-- 左 前门-->
                        <div class="car_left_door1" :style="{backgroundPositionX:car.leftPrevDoor}"></div>
                        <!-- 左 后门-->
                        <div class="car_left_door2" :style="{backgroundPositionX:car.leftNextDoor}"></div>
                        <!-- 左 保险杠 中间 底部-->
                        <div class="car_left_bumper_bottom" :style="{backgroundPositionX:car.bumperCenterLeft}"></div>
                        <!-- 左 前轮-->
                        <div class="car_left_tire1" :style="{backgroundPositionX:car.leftPrevTire}"></div>
                        <div class="car_left_tire2" :style="{backgroundPositionX:car.leftNextTire}"></div>
                        <!-- 左 - 后备箱-->
                        <div class="left_trunk" :style="{backgroundPositionX:car.trunk}"></div>
                    </div>
                </div>

                <!-- 顶部-->
                <div @click="onCarBearing(3,carTop)" class="car-direction car-item2">
                    <div class="cartop1 carBody">
                        <div class="top_hood" :style="{backgroundPositionX:car.engine}"></div>
                        <!-- 前-翼子板-左-->
                        <div class="platePrevLeft" :style="{backgroundPositionX:car.prevLeftPlate}"></div>
                        <!-- 前 - 翼子板 -右-->
                        <div class="platePrevRight" :style="{backgroundPositionX:car.prevRightPlate}"></div>
                        <!-- 前 - 立柱-->
                        <div class="columnPrevLeft" :style="{backgroundPositionX:car.columnPrevLeft}"></div>
                        <div class="columnPrevRight" :style="{backgroundPositionX:car.columnPrevRight}"></div>
                        <!-- 车顶 -->
                        <div class="top_roof" :style="{backgroundPositionX:car.roof}"></div>
                        <!-- 后 - 翼子板-右-->
                        <div class="plateNextRight" :style="{backgroundPositionX:car.nextRightPlate}"></div>
                        <div class="plateNextLeft" :style="{backgroundPositionX:car.nextLeftPlate}"></div>
                        <!--后 - 保险杠-->
                        <div class="bumperNext" :style="{backgroundPositionX:car.bumperNext}"></div>
                        <!-- 左 - 门柱中间-->
                        <div class="columnCenterLeft" :style="{backgroundPositionX:car.columnCenterLeft}"></div>
                        <!-- 左 前门-->
                        <div class="leftPrevDoor" :style="{backgroundPositionX:car.leftPrevDoor}"></div>
                        <div class="leftNextDoor" :style="{backgroundPositionX:car.leftNextDoor}"></div>
                        <!-- 左 - 后备箱-->
                        <div class="trunk" :style="{backgroundPositionX:car.trunk}"></div>
                        <!-- 右 - 门柱中间-->
                        <div class="columnCenterRight" :style="{backgroundPositionX:carRight.rightCenterColumn}"></div>
                        <!-- 右 前门-->
                        <div class="top_rightPrevDoor" :style="{backgroundPositionX:car.rightPrevDoor}"></div>
                        <!-- 右 后门-->
                        <div class="top_rightNextDoor" :style="{backgroundPositionX:car.rightNextDoor}"></div>

                    </div>
                </div>

                <!-- 右边-->
                <div @click="onCarBearing(4,carRight)" class="car-direction car-item2">
                    <div class="carright1 carBody">
                        <div class="rightEngine" :style="{backgroundPositionX:car.engine}"></div>
                        <!-- 前保险杠-->
                        <div class="rightPrevBumper" :style="{backgroundPositionX:car.prevBumper}"></div>
                        <!-- 前裙边-->
                        <div class="rightPrevSkirt" :style="{backgroundPositionX:car.prevSkirt}"></div>
                        <!-- 前 - 翼子板 -右-->
                        <div class="rightPrevPlate" :style="{backgroundPositionX:car.prevRightPlate}"></div>
                        <div class="rightPrevMirror" :style="{backgroundPositionX:car.mirrorRight}"></div>
                        <div class="rightPrevColumn" :style="{backgroundPositionX:car.columnPrevRight}"></div>
                        <!-- 车顶 -->
                        <div class="rightRoof" :style="{backgroundPositionX:car.roof}"></div>
                        <!-- 后 - 翼子板-右-->
                        <div class="rightNextPlate" :style="{backgroundPositionX:car.nextRightPlate}"></div>
                        <!--后 - 保险杠-->
                        <div class="rightNextBumper" :style="{backgroundPositionX:car.bumperNext}"></div>
                        <!-- 后 - 保险杠 - 底部-->
                        <div class="rightNextSkirt" :style="{backgroundPositionX:car.nextSkirt}"></div>
                        <!-- 左 - 前侧裙边 - -->
                        <div class="rightPrevSkirt" :style="{backgroundPositionX:car.prevSkirt}"></div>
                        <!-- 左 - 后备箱-->
                        <div class="rightTrunk" :style="{backgroundPositionX:car.trunk}"></div>
                        <!-- 右 - 门柱中间-->
                        <div class="rightCenterColumn" :style="{backgroundPositionX:car.rightCenterColumn}"></div>
                        <!-- 右 前门-->
                        <div class="rightPrevDoor" :style="{backgroundPositionX:car.rightPrevDoor}"></div>
                        <!-- 右 后门-->
                        <div class="rightNextDoor" :style="{backgroundPositionX:car.rightNextDoor}"></div>
                        <!-- 右 保险杠 中间 底部-->
                        <div class="rightCenterBumper" :style="{backgroundPositionX:car.rightCenterBumper}"></div>
                        <!-- 右-前轮-->
                        <div class="rightPrevTire" :style="{backgroundPositionX:carRight.rightPrevTire}"></div>
                        <div class="rightNextTire" :style="{backgroundPositionX:carRight.rightNextTire}"></div>

                    </div>
                </div>
            </div>
            <div class="car-main">
                <!--车头-->
                <div v-show="carBearing==0" class="car-container">
                    <div class="imgMap">
                        <img src="./images/carhead.png" usemap="#carhead" width="625" height="457" border="0" style="border: none"/>
                        <map id="carhead" name="carhead" @click="onHead($event)">
                            <area shape="poly" alt="" data-href="前-引擎" href="javascript:;" data-seat="engine"
                                  coords="73,143,166,151,251,148,386,147,472,149,548,142,549,182,532,208,444,227,180,226,95,210,71,172"/>
                            <area shape="poly" alt="" data-href="前-立柱-右" href="javascript:;" data-seat="columnPrevRight"
                                  coords="79,137,133,15,141,13,91,141"/>
                            <area shape="poly" alt="" data-href="前-立柱-左" href="javascript:;" data-seat="columnPrevLeft"
                                  coords="485,15,493,13,545,139,533,139"/>
                            <area shape="poly" alt="" data-href="前-镜子-右" href="javascript:;" data-seat="mirrorRight"
                                  coords="75,133,63,132,61,114,15,115,4,125,4,140,26,148,54,151,69,149"/>
                            <area shape="poly" alt="" data-href="前-镜子-左" href="javascript:;" data-seat="mirrorLeft"
                                  coords="551,132,560,132,563,114,596,112,612,112,625,128,620,142,602,150,568,150,555,150"/>
                            <area shape="poly" alt="" data-href="前-车顶" href="javascript:;" data-seat="roof"
                                  coords="143,13,309,0,412,6,449,7,483,15,493,42,369,36,241,33,130,41"/>
                            <area shape="poly" alt="" data-href="前-翼子板-右" href="javascript:;" data-seat="prevRightPlate"
                                  coords="51,152,67,151,74,182,91,206,95,208,65,206,55,232,36,204"/>
                            <area shape="poly" alt="" data-href="前-翼子板-左" href="javascript:;" data-seat="prevLeftPlate"
                                  coords="535,207,547,190,553,152,571,150,581,177,591,202,567,233,564,210"/>
                            <area shape="poly" alt="" data-href="前-保险杠" href="javascript:;" data-seat="prevBumper"
                                  coords="34,205,57,243,187,265,204,278,246,284,401,283,430,268,447,263,566,238,591,208,583,297,575,364,471,373,351,373,230,374,125,369,52,368,44,306,38,254,34,226"/>
                            <area shape="poly" alt="" data-href="前-裙边" href="javascript:;" data-seat="prevSkirt"
                                  coords="54,367,267,376,390,373,487,373,574,369,563,393,543,399,493,404,351,401,234,403,157,403,95,402,64,394"/>
                        </map>
                    </div>
                    <div class="cat-location">
                        <div class="carhead carBody">
                            <!-- 前 - 引擎-->
                            <div class="headEngine" :style="{backgroundPositionX:head.engine}"></div>
                            <!-- 前 - 保险杠-->
                            <div class="head_bumper_no" :style="{backgroundPositionX:head.prevBumper}"></div>
                            <!-- 前 - 保险杠 - 底部-->
                            <div class="head_bumper_skrit" :style="{backgroundPositionX:head.prevSkirt}"></div>
                            <!-- 前 - 翼子板-左-->
                            <div class="head_plate_left" :style="{backgroundPositionX:head.prevLeftPlate}"></div>
                            <!-- 前 - 翼子板 -右-->
                            <div class="head_plate_right" :style="{backgroundPositionX:head.prevRightPlate}"></div>
                            <!-- 前 - 车顶 -->
                            <div class="head_roof" :style="{backgroundPositionX:head.roof}"></div>
                            <!-- 前 - 车镜-左-->
                            <div class="head_mirror_left" :style="{backgroundPositionX:head.mirrorLeft}"></div>
                            <div class="head_mirror_right" :style="{backgroundPositionX:head.mirrorRight}"></div>
                            <!-- 前 - 立柱-->
                            <div class="head_column_left" :style="{backgroundPositionX:head.columnPrevLeft}"></div>
                            <div class="head_column_right" :style="{backgroundPositionX:head.columnPrevRight}"></div>
                        </div>
                    </div>
                </div>
                <!--车尾-->
                <div v-show="carBearing==1" class="car-container">
                    <div class="imgMap">
                        <img src="./images/carfoot.png" usemap="#carFoot" width="625" height="447"/>
                        <map id="carFoot" name="carFoot" @click="onFoot($event)">
                            <area shape="poly" alt=""
                                  coords="128,14,220,4,324,2,438,6,486,10,498,28,488,34,412,30,316,26,224,26,144,38,124,34"
                                  data-href="后-车顶" data-seat="roof" href="javascript:;"/>
                            <area shape="poly" alt=""
                                  coords="124,36,102,106,66,126,44,162,38,194,66,194,78,186,80,142,86,132,128,132,120,112,128,66,138,38"
                                  data-href="后翼子板" data-seat="nextLeftPlate" href="javascript:;"/>
                            <area shape="poly" alt=""
                                  coords="494,36,502,38,524,108,560,130,574,168,582,188,562,192,548,192,546,138,506,130,508,114"
                                  data-href="后-翼子板右" data-seat="nextRightPlate" href="javascript:;"/>
                            <area shape="poly" alt=""
                                  coords="34,202,80,190,144,188,152,210,180,230,196,228,436,232,476,208,482,188,548,188,582,190,590,210,586,244,584,252,580,306,526,292,436,290,336,290,218,290,128,290,40,306,36,254"
                                  data-href="后-保险杠" data-seat="bumperNext" href="javascript:;"/>
                            <area shape="poly" alt=""
                                  coords="42,306,170,290,264,288,424,290,538,294,584,306,570,346,562,358,512,336,496,314,476,316,466,332,450,344,402,338,270,344,190,342,160,338,150,324,134,314,116,320,110,334,84,338,60,362,42,344"
                                  data-href="后裙边" data-seat="nextSkirt" href="javascript:;"/>
                            <area shape="poly" data-href="后-后备箱" data-seat="trunk" href="javascript:;"
                                  coords="122,114,301,108,421,112,509,113,508,127,476,130,459,147,448,168,448,182,482,186,477,201,460,222,435,231,376,232,313,230,251,231,191,231,170,224,154,205,146,186,173,185,184,178,175,151,163,134,133,127,128,127"/>
                        </map>
                    </div>
                    <div class="cat-location">
                        <template>
                            <div class="carFoot carBody">
                                <!-- 后 - 车顶 -->
                                <div class="foot_roof" :style="{backgroundPositionX:foot.roof}"></div>
                                <!-- 后 - 翼子板-左-->
                                <div class="foot_plate_left" :style="{backgroundPositionX:foot.nextLeftPlate}"></div>
                                <!-- 后 - 翼子板 -右-->
                                <div class="foot_plate_right" :style="{backgroundPositionX:foot.nextRightPlate}"></div>
                                <!--后 - 保险杠-->
                                <div class="foot_bumper_no" :style="{backgroundPositionX:foot.bumperNext}"></div>
                                <!-- 后 - 保险杠 - 底部-->
                                <div class="foot_bumper_skrit" :style="{backgroundPositionX:foot.nextSkirt}"></div>
                                <!-- 后-后备箱-->
                                <div class="foot_trunk" :style="{backgroundPositionX:foot.trunk}"></div>
                            </div>
                        </template>
                    </div>
                </div>
                <!--左-->
                <div v-show="carBearing==2" class="car-container2">
                    <div class="imgMap2">
                        <img src="./images/carleft.png" usemap="#carleft" width="787" height="239"/>
                        <map id="carleft" name="carleft" @click="onLeft($event)">
                            <area shape="poly" data-href="左 - 前门" href="javascript:;" data-seat="leftPrevDoor"
                                  coords="255,74,238,89,236,113,238,150,239,184,241,193,274,194,309,193,360,193,397,193,399,144,400,107,403,91,405,71,368,73,307,79,274,79"/>
                            <area shape="poly" data-href="左 - 后门" href="javascript:;" data-seat="leftNextDoor"
                                  coords="407,69,460,69,501,65,536,65,575,60,569,93,552,118,533,141,526,164,520,189,463,192,400,193,397,192,400,132,400,98"/>
                            <area shape="poly" data-href="左-保险杠-中间" href="javascript:;" data-seat="bumperCenterLeft"
                                  coords="242,195,398,193,521,192,518,207,397,208,242,211"/>
                            <area shape="poly" data-href="左 -前轮" href="javascript:;" data-seat="leftPrevTire"
                                  coords="159,145,168,144,181,150,191,158,196,166,200,177,198,188,196,200,190,209,181,216,168,221,157,224,140,218,134,212,125,203,121,188,120,176,122,166,128,158,133,153,142,147,150,146"/>
                            <area shape="poly" data-href="左 - 后轮" href="javascript:;" data-seat="leftNextTire"
                                  coords="587,144,597,143,610,144,621,151,627,158,633,167,638,179,636,196,628,208,615,218,598,222,578,217,565,208,557,194,555,181,560,164,568,152,576,148"/>
                            <area shape="poly" data-href="左- 车顶" href="javascript:;" data-seat="roof"
                                  coords="315,16,364,6,407,1,442,2,475,2,513,3,575,11,582,14,568,19,566,42,519,25,454,21,392,22,344,25,315,36"/>
                            <area shape="poly" data-href="左- 翼子板" href="javascript:;" data-seat="prevLeftPlate"
                                  coords="107,109,233,77,238,95,235,123,239,163,242,194,228,196,223,176,217,156,207,142,184,126,140,121,114,134,104,153,96,171,88,162,81,156,78,141,75,127,92,125"/>
                            <area shape="poly" data-href="左- 后翼子板" href="javascript:;" data-seat="nextLeftPlate"
                                  coords="568,21,708,74,721,89,690,96,662,113,640,133,614,118,590,115,570,121,553,133,537,157,533,177,533,191,522,189,531,147,544,126,562,102,570,88,576,61,588,61,590,55,579,47,566,41"/>
                            <area shape="poly" data-href="左 - 前方保险杠" href="javascript:;" data-seat="prevBumper"
                                  coords="73,129,33,135,21,135,18,135,8,145,5,152,1,162,8,173,11,189,4,194,14,199,26,199,56,201,91,201,94,174,84,162"/>
                            <area shape="poly" data-href="左- 前侧裙边" href="javascript:;" data-seat="prevSkirt"
                                  coords="21,202,89,203,93,203,91,211,76,210,51,211,23,213,21,211"/>
                            <area shape="poly" data-href="左 - 引擎盖" href="javascript:;" data-seat="engine"
                                  coords="183,73,152,78,107,85,75,91,39,101,23,108,22,113,29,113,30,121,29,121,35,119,42,116,60,112,96,108,106,107,109,108,127,104,232,78,194,78"/>
                            <area shape="poly" data-href="左-镜子" href="javascript:;" data-seat="mirrorLeft"
                                  coords="256,71,282,57,294,63,294,71,291,76,270,79"/>
                            <area shape="poly" data-href="左- 后备箱" data-seat="trunk" href="javascript:;"
                                  coords="667,57,686,51,721,56,756,51,762,51,755,62,766,82,769,90,771,100,764,100,763,92,750,71,712,71,711,76"/>
                            <area shape="poly" data-href="左-后保险杠" data-seat="bumperNext" href="javascript:;"
                                  coords="641,132,665,108,702,94,719,90,729,100,760,100,772,101,771,123,783,126,783,160,730,165,662,170"/>
                            <area shape="poly" data-href="左-后群边" data-seat="nextSkirt" href="javascript:;"
                                  coords="662,170,781,160,784,163,780,172,781,181,745,191,695,194,668,198"/>
                            <area shape="poly" data-href="左-门柱-中间" href="javascript:;" data-seat="columnCenterLeft"
                                  coords="401,22,428,20,426,67,393,70,391,70"/>
                            <area shape="poly" data-href="左 - 前立柱" href="javascript:;" data-seat="columnPrevLeft"
                                  coords="318,23,274,49,238,71,233,75,237,91,251,76,270,62,306,45,317,37"/>
                        </map>
                    </div>
                    <div class="cat-location2">
                        <div class="carLeft carBody">
                            <!-- 左 前门-->
                            <div class="car_left_door1" :style="{backgroundPositionX:carLeft.leftPrevDoor}"></div>
                            <!-- 左 后门-->
                            <div class="car_left_door2" :style="{backgroundPositionX:carLeft.leftNextDoor}"></div>
                            <!-- 左 保险杠 中间 底部-->
                            <div class="car_left_bumper_bottom"
                                 :style="{backgroundPositionX:carLeft.bumperCenterLeft}"></div>
                            <!-- 左 前轮-->
                            <div class="car_left_tire1" :style="{backgroundPositionX:carLeft.leftPrevTire}"></div>
                            <div class="car_left_tire2" :style="{backgroundPositionX:carLeft.leftNextTire}"></div>
                            <!-- 左 - 车顶 -->
                            <div class="left_roof" :style="{backgroundPositionX:carLeft.roof}"></div>
                            <!-- 左- 翼子板-前-->
                            <div class="left_plate_before" :style="{backgroundPositionX:carLeft.prevLeftPlate}"></div>
                            <!-- 左- - 翼子板 - 后-->
                            <div class="left_plate_after" :style="{backgroundPositionX:carLeft.nextLeftPlate}"></div>
                            <!-- 左 - 车头保险杠 --->
                            <div class="left_bumper_head" :style="{backgroundPositionX:carLeft.prevBumper}"></div>
                            <!-- 左 - 前侧裙边 - -->
                            <div class="left_bumper_skrit_front" :style="{backgroundPositionX:carLeft.prevSkirt}"></div>
                            <!-- 左 - 引擎盖 - -->
                            <div class="left_hood" :style="{backgroundPositionX:carLeft.engine}"></div>
                            <!-- 左 - 镜子-->
                            <div class="left_mirror" :style="{backgroundPositionX:carLeft.mirrorLeft}"></div>
                            <!-- 左 - 后备箱-->
                            <div class="left_trunk" :style="{backgroundPositionX:carLeft.trunk}"></div>
                            <!-- 左 - 后保险杠   -->
                            <div class="left_after_bumper" :style="{backgroundPositionX:carLeft.bumperNext}"></div>
                            <!--  左 - 后裙边 -->
                            <div class="left_bumper_skrit_after" :style="{backgroundPositionX:carLeft.nextSkirt}"></div>
                            <!-- 左 - 门柱中间-->
                            <div class="left_door_postB" :style="{backgroundPositionX:carLeft.columnCenterLeft}"></div>
                            <!-- 左 - 前左立柱-->
                            <div class="left_door_postA" :style="{backgroundPositionX:carLeft.columnPrevLeft}"></div>
                        </div>
                    </div>
                </div>
                <!--顶-->
                <div v-show="carBearing==3" class="car-container2">
                    <div class="imgMap2">
                        <img src="./images/cartop.png" usemap="#cartop" width="783" height="328"/>
                        <map id="cartop" name="cartop" @click="onTop($event)">
                            <area shape="poly" data-href="顶-引擎盖" data-seat="engine" href="javascript:;"
                                  coords="227,45,226,34,191,35,162,36,120,39,98,41,60,62,42,83,28,97,26,102,30,106,22,145,23,200,31,227,45,254,71,269,101,288,160,292,205,291,224,293,224,282,209,257,198,225,194,190,191,154,194,118,203,83,213,58"
                            />
                            <area shape="poly" data-href="顶-前 翼子板" data-seat="prevLeftPlate" href="javascript:;"
                                  coords="106,289,255,295,266,308,246,312,193,312,151,311,120,311,68,296,70,292,87,296,99,296"
                            />
                            <area shape="poly" data-href="顶-前翼子板右" data-seat="prevRightPlate" href="javascript:;"
                                  coords="251,34,262,22,246,19,211,20,175,18,141,18,116,18,85,24,77,27,69,30,76,33,95,30,104,32,100,38,121,40,159,36,191,36,224,35"
                            />
                            <area shape="poly" data-href="顶-右立柱" data-seat="columnPrevRight" href="javascript:;"
                                  coords="318,67,320,52,292,50,280,45,278,38,269,41,255,40,251,34,227,34,226,44,244,49,269,56,302,62"
                            />
                            <area shape="poly" data-href="顶-前左立柱" data-seat="columnPrevLeft" href="javascript:;"
                                  coords="320,259,323,274,281,282,277,292,274,292,270,286,257,288,252,295,222,291,226,282,259,275"
                            />
                            <area shape="poly" data-href="顶-车顶" data-seat="roof" href="javascript:;"
                                  coords="321,52,368,60,398,63,425,62,508,59,569,50,566,74,573,110,580,149,580,196,565,253,567,280,514,270,458,266,408,265,361,268,322,272,321,258,311,194,314,135,316,91,320,74"
                            />
                            <area shape="poly" data-href="顶 - 左前门" data-seat="leftPrevDoor" href="javascript:;"
                                  coords="281,294,403,293,397,310,354,311,322,311,303,311,287,311"
                            />
                            <area shape="poly" data-href="顶 - 左后门" data-seat="leftNextDoor" href="javascript:;"
                                  coords="406,293,575,289,570,300,560,305,551,312,504,310,467,311,424,311,398,311"
                            />
                            <area shape="poly" data-href="顶 - 左门中间柱" data-seat="columnCenterLeft" href="javascript:;"
                                  coords="400,267,389,291,421,291,422,265"/>
                            <area shape="poly" data-href="顶-右前门" data-seat="rightPrevDoor" href="javascript:;"
                                  coords="282,31,403,34,397,18,284,19"/>
                            <area shape="poly" data-href="顶-右后门" data-seat="rightNextDoor" href="javascript:;"
                                  coords="404,34,575,37,551,17,495,19,441,20,398,20"/>
                            <area shape="poly" data-href="顶-右门中间柱" data-seat="columnCenterRight" href="javascript:;"
                                  coords="389,39,402,62,422,62,419,37"/>
                            <area shape="poly" data-href="顶 - 左后翼子板" data-seat="nextLeftPlate" href="javascript:;"
                                  coords="566,257,726,267,714,281,716,283,720,288,723,291,695,301,662,310,612,312,552,310,576,291,565,287,569,280"
                            />
                            <area shape="poly" data-href="顶 - 右后翼子板" data-seat="nextRightPlate" href="javascript:;"
                                  coords="568,71,725,60,715,49,719,42,718,35,663,20,600,18,549,16,574,34,563,41,567,51"
                            />
                            <area shape="poly" data-href="顶-后备箱" data-seat="trunk" href="javascript:;"
                                  coords="663,65,725,61,730,59,738,70,746,89,753,125,759,171,755,205,748,226,738,246,727,261,726,264,722,267,663,264,681,217,684,167,681,119,669,77"
                            />
                            <area shape="poly" data-href="顶-后保险杠" data-seat="bumperNext" href="javascript:;"
                                  coords="718,43,719,36,747,50,760,61,774,97,781,124,784,158,781,208,774,241,763,267,756,276,725,290,723,290,717,283,733,281,749,260,756,249,758,228,745,242,738,255,734,263,728,266,723,274,725,268,733,255,741,241,747,227,757,194,756,131,748,91,729,68,727,59,735,68,747,86,755,93,758,83,754,71,741,57,730,45"
                            />
                        </map>
                    </div>
                    <div class="cat-location2">
                        <div class="carTop carBody">
                            <!-- 顶-引擎盖 - -->
                            <div class="top_hood" :style="{backgroundPositionX:carTop.engine}"></div>
                            <!-- 顶-翼子板-前左-->
                            <div class="platePrevLeft" :style="{backgroundPositionX:carTop.prevLeftPlate}"></div>
                            <!-- 顶-翼子板 前右-->
                            <div class="platePrevRight" :style="{backgroundPositionX:carTop.prevRightPlate}"></div>
                            <!-- 顶 - 前左立柱 左右 -->
                            <div class="columnPrevLeft" :style="{backgroundPositionX:carTop.columnPrevLeft}"></div>
                            <div class="columnPrevRight" :style="{backgroundPositionX:carTop.columnPrevRight}"></div>
                            <!-- 左 - 车顶 -->
                            <div class="top_roof" :style="{backgroundPositionX:carTop.roof}"></div>
                            <!-- 顶-左前门-->
                            <div class="leftPrevDoor" :style="{backgroundPositionX:carTop.leftPrevDoor}"></div>
                            <!-- 顶-左后门-->
                            <div class="leftNextDoor" :style="{backgroundPositionX:carTop.leftNextDoor}"></div>
                            <!-- 顶 - 左门柱中间-->
                            <div class="columnCenterLeft" :style="{backgroundPositionX:carTop.columnCenterLeft}"></div>
                            <!-- 顶 - 右门柱中间-->
                            <div class="columnCenterRight" :style="{backgroundPositionX:carTop.columnCenterRight}"></div>
                            <!-- 顶-右前门-->
                            <div class="top_rightPrevDoor" :style="{backgroundPositionX:carTop.rightPrevDoor}"></div>
                            <!-- 顶-右后门-->
                            <div class="top_rightNextDoor" :style="{backgroundPositionX:carTop.rightNextDoor}"></div>
                            <!-- 顶- 后翼子板 左-->
                            <div class="plateNextLeft" :style="{backgroundPositionX:carTop.nextLeftPlate}"></div>
                            <div class="plateNextRight" :style="{backgroundPositionX:carTop.nextRightPlate}"></div>
                            <!-- 顶-后备箱-->
                            <div class="trunk" :style="{backgroundPositionX:carTop.trunk}"></div>
                            <!-- 顶-保险杠-->
                            <div class="bumperNext" :style="{backgroundPositionX:carTop.bumperNext}"></div>
                        </div>
                    </div>
                </div>
                <!--右-->
                <div v-show="carBearing==4" class="car-container2">
                    <div class="imgMap2">
                        <img src="./images/carright.png" usemap="#carRight" width="784" height="236"/>
                        <map id="carRight" name="carRight" @click="onRight($event)">
                            <area shape="poly" data-href="右-右前轮" data-seat="rightPrevTire" href="javascript:;"
                                  coords="618,143,635,143,646,149,655,156,662,168,662,187,655,206,642,218,624,221,602,217,592,207,586,192,584,175,588,162,599,151"/>
                            <area shape="poly" data-href="右-右后轮" data-seat="rightNextTire" href="javascript:;"
                                  coords="180,142,201,143,215,152,221,160,227,173,227,188,222,201,213,213,194,221,169,217,157,207,147,189,154,162,168,145"/>
                            <area shape="poly" data-href="右-前翼子板" data-seat="rightPrevPlate" href="javascript:;"
                                  coords="552,76,578,85,615,94,673,105,678,112,679,123,672,132,666,132,645,124,613,119,589,129,574,142,564,164,556,190,556,193,543,192,547,154,550,112,546,93,542,82"/>
                            <area shape="poly" data-href="右-后翼子板" data-seat="rightNextPlate" href="javascript:;"
                                  coords="213,21,160,39,118,58,77,71,72,88,68,87,89,92,128,107,149,129,171,117,207,114,224,123,237,137,250,159,255,188,262,186,257,156,240,130,227,106,212,79,208,61,195,59,194,55,208,44,215,42,215,35"/>
                            <area shape="poly" data-href="右-引擎盖" data-seat="engine" href="javascript:;"
                                  coords="554,76,587,76,584,79,596,75,600,71,627,76,671,81,709,89,753,102,762,110,753,114,754,119,759,125,765,134,758,130,750,118,729,111,684,107,676,106,638,96,603,92,579,84"/>
                            <area shape="poly" data-href="右-前保险杠" data-seat="prevBumper" href="javascript:;"
                                  coords="678,112,697,124,721,129,754,134,761,135,774,144,780,153,781,164,778,167,778,167,775,172,775,185,781,195,768,197,737,198,691,202,689,174,681,158,673,143,665,132,673,131,677,120"/>
                            <area shape="poly" data-href="右-前裙边" data-seat="prevSkirt" href="javascript:;"
                                  coords="691,203,762,200,764,209,741,211,700,211"/>
                            <area shape="poly" data-href="右-前立柱" data-seat="rightPrevColumn" href="javascript:;"
                                  coords="537,81,524,69,484,43,459,33,465,23,498,38,530,58,546,70,551,75"/>
                            <area shape="poly" data-href="右-车顶" data-seat="roof" href="javascript:;"
                                  coords="459,30,466,18,470,14,442,9,396,1,350,0,294,0,271,0,224,5,203,12,214,20,215,39,248,28,282,19,335,19,388,19,436,26"/>
                            <area shape="poly" data-href="右-门中间立柱" data-seat="rightCenterColumn" href="javascript:;"
                                  coords="358,20,382,20,395,70,358,68"/>
                            <area shape="poly" data-href="右-前门" data-seat="rightPrevDoor" href="javascript:;"
                                  coords="377,69,460,76,527,76,528,74,535,77,542,89,549,109,547,156,542,191,541,193,387,191"/>
                            <area shape="poly" data-href="右-后门" data-seat="rightNextDoor" href="javascript:;"
                                  coords="210,59,269,61,321,67,378,70,386,190,348,191,264,191,260,159,250,136,238,125,230,109,218,88,212,74"/>
                            <area shape="poly" data-href="右-保险杠中间" data-seat="rightCenterBumper" href="javascript:;"
                                  coords="263,191,544,194,541,210,266,207"/>
                            <area shape="poly" data-href="右-后保险杠" data-seat="rightNextBumper" href="javascript:;"
                                  coords="145,131,136,146,123,170,67,165,34,162,1,157,3,128,5,124,13,122,13,109,13,101,16,94,27,99,56,100,66,85,69,85,74,76,73,90,100,95,128,108"/>
                            <area shape="poly" data-href="右-后裙边" data-seat="nextSkirt" href="javascript:;"
                                  coords="2,159,60,164,124,169,115,197,74,195,22,188,3,182"/>
                            <area shape="poly" data-href="右-后备箱" data-seat="trunk" href="javascript:;"
                                  coords="117,54,111,59,88,68,74,72,62,69,45,69,39,69,30,79,27,88,23,94,23,96,16,93,18,82,22,76,31,63,24,50,36,50,61,52,89,53,102,52"/>
                            <area shape="poly" data-href="右-镜子" data-seat="mirrorRight" href="javascript:;"
                                  coords="528,71,521,78,503,78,492,78,488,68,493,58,503,56,515,63"/>
                        </map>
                    </div>
                    <div class="cat-location2">
                        <div class="carRight carBody">
                            <!-- 右-前轮-->
                            <div class="rightPrevTire" :style="{backgroundPositionX:carRight.rightPrevTire}"></div>
                            <div class="rightNextTire" :style="{backgroundPositionX:carRight.rightNextTire}"></div>
                            <!-- 右-翼子板-前-->
                            <div class="rightPrevPlate" :style="{backgroundPositionX:carRight.rightPrevPlate}"></div>
                            <!-- 右-翼子板-后-->
                            <div class="rightNextPlate" :style="{backgroundPositionX:carRight.rightNextPlate}"></div>
                            <!-- 右-引擎盖 - -->
                            <div class="rightEngine" :style="{backgroundPositionX:carRight.engine}"></div>
                            <!-- 右-车头保险杠 --->
                            <div class="rightPrevBumper" :style="{backgroundPositionX:carRight.prevBumper}"></div>
                            <!-- 右-前侧裙边 - -->
                            <div class="rightPrevSkirt" :style="{backgroundPositionX:carRight.prevSkirt}"></div>
                            <!-- 右 - 前立柱-->
                            <div class="rightPrevColumn" :style="{backgroundPositionX:carRight.rightPrevColumn}"></div>
                            <!-- 右 - 车顶 -->
                            <div class="rightRoof" :style="{backgroundPositionX:carRight.roof}"></div>
                            <!-- 右 - 门柱中间-->
                            <div class="rightCenterColumn" :style="{backgroundPositionX:carRight.rightCenterColumn}"></div>
                            <!-- 右 前门-->
                            <div class="rightPrevDoor" :style="{backgroundPositionX:carRight.rightPrevDoor}"></div>
                            <!-- 右 后门-->
                            <div class="rightNextDoor" :style="{backgroundPositionX:carRight.rightNextDoor}"></div>
                            <!-- 右 保险杠 中间 底部-->
                            <div class="rightCenterBumper" :style="{backgroundPositionX:carRight.rightCenterBumper}"></div>
                            <!-- 右 - 后保险杠   -->
                            <div class="rightNextBumper" :style="{backgroundPositionX:carRight.rightNextBumper}"></div>
                            <!--  右 - 后裙边 -->
                            <div class="rightNextSkirt" :style="{backgroundPositionX:carRight.nextSkirt}"></div>
                            <!-- 右 - 后备箱-->
                            <div class="rightTrunk" :style="{backgroundPositionX:carRight.trunk}"></div>
                            <!-- 右-镜子-->
                            <div class="rightPrevMirror" :style="{backgroundPositionX:carRight.mirrorRight}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="orientation">
            <!-- 前部 钣金/喷漆-->
            <div class="front">
                <div class="orientation-title">
                    <span>前部</span>
                    <span>钣金/喷漆</span>
                </div>
                <ul class="car-options">
                    <li class="options-item" v-for="(item,index) in front" :key="index"
                        @click="changeItem(item,checkFront)">
                        {{item.text}}
                        <span v-if="checkFront.includes(item)" class="icons-a"><i>√</i></span>
                    </li>
                </ul>
            </div>
            <div class="posterior">
                <div class="orientation-title">
                    <span>后部 </span>
                    <span>钣金/喷漆</span>
                </div>
                <ul class="car-options">
                    <li class="options-item" v-for="(item,index) in posterior" :key="index"
                        @click="changeItem(item,checkPosterior)">
                        {{item.text}}
                        <span v-if="checkPosterior.includes(item)" class="icons-a"><i>√</i></span>
                    </li>
                </ul>
            </div>
            <div class="leftSide">
                <div class="orientation-title">
                    <span>左侧  </span>
                    <span>钣金/喷漆</span>
                </div>
                <ul class="car-options">
                    <li class="options-item" v-for="(item,index) in leftSide" :key="index"
                        @click="changeItem(item,checkLeftSide)">
                        {{item.text}}
                        <span v-if="checkLeftSide.includes(item)" class="icons-a"><i>√</i></span>
                    </li>
                </ul>
            </div>
            <div class="rightSide">
                <div class="orientation-title">
                    <span>右侧  </span>
                    <span>钣金/喷漆</span>
                </div>
                <ul class="car-options">
                    <li class="options-item" v-for="(item,index) in rightSide" :key="index"
                        @click="changeItem(item,checkRightSide)">
                        {{item.text}}
                        <span v-if="checkRightSide.includes(item)" class="icons-a"><i>√</i></span>
                    </li>
                </ul>
            </div>
            <div class="carRests">
                <div class="orientation-title">
                    <span>其他  </span>
                    <span>钣金/喷漆</span>
                </div>
                <ul class="car-options">
                    <li class="options-item" v-for="(item,index) in carRests" :key="index"
                        @click="changeItem(item,checkRests)">
                        {{item.text}}
                        <span v-if="checkRests.includes(item)" class="icons-a"><i>√</i></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>`,

    data() {
        return {
            carBearing: 0, // {0 车头 1 车尾 2 左侧  3 顶部 4 右侧}
            car: {
                engine: 0,  // 引擎盖
                prevBumper: 0, // 前保险杠
                prevSkirt: 0,
                prevLeftPlate: 0,// 前左翼子板
                prevRightPlate: 0,
                mirrorLeft: 0, // 镜子
                mirrorRight: 0, // 右镜
                columnPrevLeft: 0,
                columnPrevRight: 0,
                columnCenterLeft: 0, // 左
                rightCenterColumn: 0,
                roof: 0, // 前车顶
                nextLeftPlate: 0, // 后左翼子板
                nextRightPlate: 0,
                bumperNext: 0,// 保险杠后
                bumperCenterLeft: 0,
                rightCenterBumper: 0,
                prevBumper: 0,
                nextSkirt: 0, // 后裙边
                prevSkirt: 0,  // 前裙边
                leftPrevDoor: 0, // 左前门
                leftNextDoor: 0, // 左后门
                rightPrevDoor: 0, // 右前门
                rightNextDoor: 0,
                leftPrevTire: 0, // 左前轮
                leftNextTire: 0, // 左后轮
                rightPrevTire: 0,
                rightNextTire: 0,
                trunk: 0 // 后备箱
            },
            head: {
                engine: 0,  // 引擎盖
                prevBumper: 0, // 保险杠
                prevSkirt: 0,// 前裙边
                prevLeftPlate: 0, // 前翼子板-左
                prevRightPlate: 0, // 前翼子板-右
                roof: 0, // 前车顶
                mirrorLeft: 0,  // 车左镜
                mirrorRight: 0, // 右镜
                columnPrevLeft: 0,
                columnPrevRight: 0,
            },
            foot: {
                roof: 0,
                nextLeftPlate: 0,
                nextRightPlate: 0,
                bumperNext: 0,
                nextSkirt: 0,
                trunk: 0 // 后备箱
            },
            carLeft: {
                leftPrevDoor: 0,  // 前门
                leftNextDoor: 0,
                leftPrevTire: 0,  // 轮胎
                leftNextTire: 0,
                bumperCenterLeft: 0,  // 保险杠
                roof: 0, // 左车顶
                prevLeftPlate: 0, // 翼子板
                nextLeftPlate: 0,
                prevBumper: 0, // 保险杠
                bumperNext: 0,
                prevSkirt: 0, // 前裙边
                nextSkirt: 0,
                engine: 0, //  引擎盖
                mirrorLeft: 0, // 镜子
                trunk: 0,  // 后备箱
                columnCenterLeft: 0, // 中间立柱
                columnPrevLeft: 0,  //车头左立柱
            },
            carTop: {
                engine: 0, // 引擎盖
                prevLeftPlate: 0, // 前翼子板左
                prevRightPlate: 0,
                columnPrevLeft: 0, // 前左立柱
                columnPrevRight: 0, // 前右立柱
                columnCenterLeft: 0,  // 左门中间
                roof: 0,// 车顶
                leftPrevDoor: 0, // 左前门
                leftNextDoor: 0,
                rightPrevDoor: 0,//右前门
                rightNextDoor: 0,
                columnCenterRight: 0,// 右门中间立柱
                nextLeftPlate: 0, // 翼子板
                nextRightPlate: 0, //
                trunk: 0, // 后备箱
                bumperNext: 0 // 保险杠
            },
            carRight: {
                rightPrevTire: 0, // 右前轮
                rightNextTire: 0,
                rightPrevPlate: 0,  // 前翼子板
                rightNextPlate: 0, //
                engine: 0, // 引擎盖
                trunk: 0,  // 后备箱
                prevSkirt: 0,  // 前裙边
                nextSkirt: 0,  //
                rightPrevColumn: 0,  // 前立柱
                rightCenterColumn: 0,  // 车门中间立柱
                roof: 0,
                rightPrevDoor: 0,  // 前门
                rightNextDoor: 0,
                prevBumper: 0,  // 前保险杠
                rightCenterBumper: 0, // 车门下保险杠
                rightNextBumper: 0, //  后保险杠
                mirrorRight: 0  // 镜子
            },
            checkFront: [],
            front: [
                {
                    text: '左前灯框',
                    id: 0
                }, {
                    text: '右前灯框',
                    id: 1
                }, {
                    text: '中网',
                    id: 2
                }, {
                    text: '前围板',
                    id: 3
                }
            ],
            checkPosterior: [],
            posterior: [
                {
                    text: '后围板',
                    id: 0
                }, {
                    text: '后地台',
                    id: 1
                }, {
                    text: '备胎坑',
                    id: 2
                }, {
                    text: '尾翼',
                    id: 3
                }
            ],
            checkLeftSide: [],
            leftSide: [
                {
                    text: '左前门框',
                    id: 0
                }, {
                    text: '左后门框',
                    id: 1
                }, {
                    text: '左前门把手',
                    id: 2
                }, {
                    text: '左后门把手',
                    id: 3
                }, {
                    text: '左C柱',
                    id: 4
                }, {
                    text: '左前门饰板',
                    id: 5
                }, {
                    text: '左后门饰板',
                    id: 6
                }, {
                    text: '左前轮眉',
                    id: 7
                }, {
                    text: '左后轮眉',
                    id: 8
                }
            ],
            checkRightSide: [],
            rightSide: [
                {
                    text: '右前门框',
                    id: 0
                }, {
                    text: '右后门框',
                    id: 1
                }, {
                    text: '右前门把手',
                    id: 2
                }, {
                    text: '右后门把手',
                    id: 3
                }, {
                    text: '右C柱',
                    id: 4
                }, {
                    text: '右前门饰板',
                    id: 5
                }, {
                    text: '右后门饰板',
                    id: 6
                }, {
                    text: '右前轮眉',
                    id: 7
                }, {
                    text: '右后轮眉',
                    id: 8
                }
            ],
            checkRests: [],
            carRests: [
                {
                    text: '倒车镜',
                    id: 0
                }, {
                    text: '导水槽',
                    id: 1
                }, {
                    text: '油箱盖',
                    id: 2
                }, {
                    text: '挡泥板',
                    id: 3
                }, {
                    text: '大梁头',
                    id: 4
                }, {
                    text: '龙门架',
                    id: 5
                }, {
                    text: '饰板',
                    id: 6
                }, {
                    text: '车顶',
                    id: 7
                }, {
                    text: '全车改色',
                    id: 8
                }
            ]
        }
    },
    methods: {
        onCarBearing(type, data) {
            this.carBearing = type;
            $('img[usemap]').rwdImageMaps();
            let orientation = data;
            let car = this.car;
            for (let key in car) {
                if (orientation.hasOwnProperty(key)) {
                    orientation[key] = car[key];
                }
            }
        },
        onHead(e) {
            let seat = e.target.dataset.seat;
            this.head[seat] = this.head[seat] == 0 ? '100%' : 0;
            this.car[seat] = this.car[seat] == 0 ? '100%' : 0;
        },
        onFoot(e) {
            let seat = e.target.dataset.seat;
            this.foot[seat] = this.foot[seat] == 0 ? '100%' : 0;
            this.car[seat] = this.car[seat] == 0 ? '100%' : 0;
        },
        onLeft(e) {
            let seat = e.target.dataset.seat;
            this.carLeft[seat] = this.carLeft[seat] == 0 ? '100%' : 0;
            this.car[seat] = this.car[seat] == 0 ? '100%' : 0;
        },
        onTop(e) {
            let seat = e.target.dataset.seat;
            this.carTop[seat] = this.carTop[seat] == 0 ? '100%' : 0;
            this.car[seat] = this.car[seat] == 0 ? '100%' : 0;
        },
        onRight(e) {
            let seat = e.target.dataset.seat;
            this.carRight[seat] = this.carRight[seat] == 0 ? '100%' : 0;
            this.car[seat] = this.car[seat] == 0 ? '100%' : 0;
        },

        changeItem(data, arr) {
            console.log(arr.includes(data));
            if (arr.includes(data)) {
                arr = arr.filter(function (ele) {
                    return ele != data;
                });
                console.log(this.checkFront);
            } else {
                arr.push(data);
            }
        }
    }
})